<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .remove{
            color:gray;
            text-decoration: line-through;
            background-color: white;
        }
        .noBorder{
            border:none
        }

    </style>
</head>
<body>
    <div id="app">
        <p>
            任务总数：{{todos.length}} ,未完成数量:{{noFinished}} ,
            <input type="button" value="删除已完成的数据" @click="del">
        </p>
        <ul>
            <li v-for="item in todos">
                <input type="checkbox" v-model="item.isFinished">
              <input 
              type="text" 
              class="noBorder"
              :class="{remove:item.isFinished}"
              :disabled="item.isFinished"
              v-model="item.text"
              />  
            </li>
        </ul>
        <input type="text" v-model="newtodo">
        <input type="button" value="添加" @click="addTodos">
    </div>
</body>
<script src="./vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data(){
            return{
                newtodo:"",
                todos:[
                    {
                        text:'html',
                        isFinished:false,
                    },
                    {
                        text:'js',
                        isFinished:true,
                    },
                    {
                        text:'css',
                        isFinished:false,
                    },
                ]
            }
        },
        computed:{
            noFinished(){
               return this.todos.filter(item=>!item.isFinished).length
            }
        },
        methods:{
            addTodos(){
                if(this.newtodo==""){
                    alert("你输入内容");
                    return
                }
                this.todos.push({
                    text:this.newtodo,
                    isFinished:false,

                });
                this.newtodo="";

            },
            del(){
                if(window.confirm("你确定要删除吗？")){
                    this.todos = this.todos.filter(item=>!item.isFinished)
                }
            }
        }
    })
    app.mount("#app")
</script>
</html>